import styled, { css } from 'styled-components';
import { circle } from 'utils/mixins';

const circleMixFunc = (color, size) => css`
    content:'';
    position:absolute;
    display:block;
    ${circle(color, size)}
`;

//最外层容器
const StyleAvatar = styled.div`
    position:relative;

`;

//在线状态
const StatusIcon = styled.div`
    position:absolute;
    top:2px;
    left:4px;
    
    ::before{
        ${({ size }) => circleMixFunc('white', size)};
        transform:scale(2);
    }

    ::after{
        ${({ theme, status, size }) => {
        switch (status) {
            case 'online':
                return circleMixFunc(theme.green, size);
            case 'offline':
                return circleMixFunc(theme.gray, size);
            default:
        }
    }}
    }
`;

//头像蒙版
const AvatarClip = styled.div`
    width:${({ size }) => size};
    height:${({ size }) => size};
    border-radius:50%;
    overflow:hidden;
`;

//头像图片
const AvatarImg = styled.img`
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
`;


export default StyleAvatar;
export { StatusIcon, AvatarClip, AvatarImg };